<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示访问IP</title>
</head>

<body>
    <button onclick="getIP()">点击显示访问IP</button>
    <div id="ip-display"></div>

    <script>
        async function getIP() {
            try {
                const response = await fetch('https://api.ipify.org?format=json');
                const data = await response.json();
                const ipAddress = data.ip;
                document.getElementById('ip-display').innerHTML = `您的访问IP是: ${ipAddress}`;
            } catch (error) {
                document.getElementById('ip-display').innerHTML = `获取IP地址时出现错误: ${error}`;
            }
        }
    </script>
</body>

</html>
